<!--
 * @Author: Meow
 * @Date: 2019-11-14 09:49:03
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-20 15:43:01
 * @Description: 业务流程管理首页
 -->
<template>
  <!-- <div id="ProcessManagement" class="container"> -->
  <div id="ProcessManagement">
    <section class="section-top">
      <el-form :inline="true">
        <!-- <el-form-item label="业务名称："> -->
        <el-form-item>
          <el-input placeholder="请输入业务名称" size="mini" v-model="tableConfig.busiProceName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="search">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="mini" @click="addProcess">新增</el-button>
        </el-form-item>
      </el-form>
    </section>
    <section class="section-table">
      <el-scrollbar :native="false" tag="section" class="el-scroll">
        <el-table :data="tableData" :header-cell-style="tableStyle" size="mini" border v-loading="loading">
          <el-table-column prop="busiProceName" label="业务名称" align="center"></el-table-column>
          <el-table-column prop="parentName" label="父流程" align="center"></el-table-column>
          <el-table-column prop="parentNodeName" label="父节点" align="center"></el-table-column>
          <el-table-column prop="summary" label="概述" align="center"></el-table-column>
          <el-table-column prop="labelName" label="标签" align="center"></el-table-column>
          <el-table-column prop="version" label="当前版本" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="200">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="toVersionManagement(scope.row)">版本管理</el-button>
              <el-button size="mini" type="primary" @click="toSearchDetail(scope.row)">查看详情</el-button>
              <el-button size="mini" type="primary" @click="toUpdatePage(scope.row)">修改</el-button>
              <el-button size="mini" type="primary" @click="stopUse(scope.row.busiProceId)" v-if="scope.row.status == 0" :disabled="scope.row.del == 0">停用</el-button>
              <el-button size="mini" type="primary" @click="startUse(scope.row.busiProceId)" v-else>启用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </section>
    <section class="section-pagination">
      <el-pagination layout="total, sizes, prev, pager, next, jumper" :page-size="tableConfig.pageSize" :total="tableConfig.total" :page-count="10" :page-sizes="[5, 10, 20, 40]"
        :current-page="tableConfig.pageNum" @current-change="changePage" @size-change="sizeChange" background>
      </el-pagination>
    </section>
  </div>
</template>
<script>
import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "ProcessManagement",
  data() {
    return {
      // 是否显示加载中
      loading: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 表格数据
      tableData: [],
      // 分页配置
      tableConfig: {
        pageNum: 1, // 页码
        pageSize: 5, // 条数
        busiProceName: "", // 流程名搜索
        total: 0 // 总数
      }
    };
  },
  filters: {
    FormatNull(value) {
      if (value == null || value == undefined || value == "") {
        return "";
      }
    }
  },
  created() {
    this.GetTableData(this.tableConfig);
  },
  methods: {
    // 获取流程列表
    GetTableData(tableConfig) {
      this.loading = true;
      processManagementApi.queryBusiProce(tableConfig).then(res => {
        console.log(" 流程表格数据---", res.data);
        if (res.data.code == 200) {
          this.tableData = res.data.data.list;
          this.tableConfig.total = res.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(`${res.data.code} ${res.data.message}`);
          this.loading = false;
        }
      });
    },
    // 跳转版本管理页
    toVersionManagement(row) {
      console.log("row", row);
      let busiProceId = row.busiProceId;
      let busiProceName = row.busiProceName;
      this.$router.push({
        name: "Version",
        query: { busiProceId: busiProceId, busiProceName: busiProceName }
      });
    },
    // 停用流程
    stopUse(busiProceId) {
      this.loading = true;
      console.log("busiProceId", busiProceId);
      processManagementApi
        .stopBusiProce({ busiProceId: busiProceId })
        .then(res => {
          console.log(" 停用", res.data);
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.GetTableData(this.tableConfig);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    // 启用流程
    startUse(busiProceId) {
      this.loading = true;
      console.log("busiProceId", busiProceId);
      processManagementApi
        .startBusiProce({ busiProceId: busiProceId })
        .then(res => {
          console.log("启用", res.data);
          if (res.data.code == 200) {
            this.$message.success(res.data.message);
            this.GetTableData(this.tableConfig);
          } else {
            this.$message.error(res.data.message);
          }
        });
    },

    // 搜索
    search() {
      this.GetTableData(this.tableConfig);
    },
    // 条数更改
    sizeChange(size) {
      this.tableConfig.pageSize = size;
      this.GetTableData(this.tableConfig);
    },
    // 页面变更
    changePage(page) {
      this.tableConfig.pageNum = page;
      this.GetTableData(this.tableConfig);
    },

    // 添加流程
    addProcess() {
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/Detail`,
        query: { type: 0 }
      });
    },
    // 修改流程
    toUpdatePage(data) {
      let version = this.versionId;
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/Detail`,
        query: {
          busiProceId: data.busiProceId,
          versionId: data.versionId,
          type: 1
        }
      });
    },
    // 查看详情
    toSearchDetail(data) {
      let version = this.versionId;
      this.$router.push({
        path: `/${_routerPath.routerName}/ProcessManagementHost/Detail`,
        query: {
          busiProceId: data.busiProceId,
          versionId: data.versionId,
          type: 2
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
@import url("./ProcessManagement.less");
</style>